<template>
    <Card style="margin-top: 20px;">
        <p slot="title" @click.prevent="show = !show">
            <Icon type="md-help"></Icon>
            点击展开操作说明
        </p>
        <article v-if="show">
            <span id="remark" v-html="remark"></span>
        </article>
    </Card>
</template>

<script>
    export default {
        props: ['name'],
        data(){
            return {
                show: false,
                remark: '',
            }
        },
        created(){
            this.$axios.get(pub.apiDomain + '/remark/content?name='+this.name).then(res => {
                this.remark = res.m;
            });
        },
    }
</script>

<style scoped>
    .ms-doc{
        width:100%;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
        margin-bottom: 20px;
    }
    .ms-doc h3{
        padding: 9px 10px 10px;
        margin: 0;
        font-size: 14px;
        line-height: 17px;
        background-color: #f5f5f5;
        border: 1px solid #d8d8d8;
        border-bottom: 0;
        border-radius: 3px 3px 0 0;
    }
    .ms-doc article{
        padding: 20px;
        word-wrap: break-word;
        background-color: #fff;
        border: 1px solid #ddd;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
    }
    .ms-doc article p{
        line-height: 2;
    }
    .ms-doc article .el-checkbox{
        margin-bottom: 5px;
    }
</style>